<template>
  <div class="dotInfo">
    <header-item :activeIndex="activeIndex"></header-item>
    <!-- 账号、姓名（可修改）、手机号（可修改）、所在城市（可修改）、具体地址（可修改） -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>网点资料</span>
        <el-popover
          placement="top"
          width="500">
          <div>
            <el-form label-width="100px" ref="info" class="demo-ruleForm">
                <el-form-item label="网点名称" prop="name">
                    <el-input v-model="info.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="linkman">
                    <el-input v-model="info.linkman"></el-input>
                </el-form-item>
                <el-form-item label="快递公司" prop="companyId">
                    <el-select v-model="info.companyId" placeholder="请选择快递公司">
                        <el-option v-for="(item,index) in expressList" :key="index" :label="item.expressName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在地区" prop="selectedOptions">
                    <el-cascader
                    :options="CityInfo"
                    v-model="info.selectedOptions"
                    @change="handleChange"
                    :clearable="true"
                    :filterable="true"
                    class="el-cascader-ex"
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('info')">确定修改</el-button>
                </el-form-item>
            </el-form>
          </div>
          <el-button slot="reference" style="border: none;height: 20px;color: #409EFF;background: #fff;float: right;">修改</el-button>
        </el-popover>
      </div>
      <ul class="info">
        <li><span>网点名称：</span><span>{{info.name}}</span></li>
        <li><span>所在地：</span><span>{{info.province+info.city+info.area}}</span></li>
        <li><span>联系人：</span><span>{{info.linkman}}</span></li>
        <li><span>联系人电话：</span><span>{{info.telephone}}</span></li>
        <li><span>联系人邮箱：</span><span>{{info.email}}</span></li>
        <li><span>所属公司：</span><span>{{info.companyName}}</span></li>
      </ul>
    </el-card>
  </div>
</template>

<script>
import Header from './header'
import global from '@/lib/global'
import CityInfo from '@/lib/city-data'
import qs from 'qs'
let that;
export default {
  components:{
      'header-item': Header
  },
  name: 'DotInfo',
  beforeCreate: function () {
      that = this;
  },
  created(){
    // 获取快递公司列表
    this.getData(global.baseUrl + '/open/getAllCompanyList','','get',(resp)=>{
        if(resp.data.success){
            this.expressList = resp.data.data;
        }else{
            this.$message.error(resp.data.message);
        }
    })
    this.$axios({
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'token':sessionStorage.getItem('token')
        },
        method: 'get',
        url: global.baseUrl + '/userInfo/userInfoDetail',
    })
    .then((resp)=>{
        if(resp.data.success){
          this.info = resp.data.data;
          console.log(this.info);
        }else{
            this.$message.error(resp.data.message);
        }
    })
    .catch((error)=>{
        this.$message.error('网络繁忙');
    })
  },
  data () {
    return {
      CityInfo,
      activeIndex: "2",
      info:{},
      expressList:[]
    }
  },
  methods:{
    // 选择所在地区
    handleChange(value) {
        this.info.province = this.$options.filters['myAddressCity'](this.info.selectedOptions[0])
        this.info.city = this.$options.filters['myAddressErae'](this.info.selectedOptions[1])
        this.info.area = this.$options.filters['myAddressMinerae'](this.info.selectedOptions[2])
    },
    getData(url,data,type,fn){
        this.$axios({
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                'token':sessionStorage.getItem('token')
            },
            method: type,
            url: url,
            data: qs.stringify(data)
        }).then((resp)=>{
            if(fn){
                fn(resp);
            }else{
                console.log(resp);
            }
        })
        .catch((error)=>{
            console.log(error);
            this.$message.error('网络出错了');
        })
    },
    submitForm (formName) {
      var ruleForm = this.info
      this.$axios({
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
          'token': sessionStorage.getItem("token")
        },
        method: 'post',
        url:  global.baseUrl + '/updateStore',
        data: qs.stringify(ruleForm)
      })
      .then((resp)=>{
          console.log(resp)
        if(resp.data.success){
          this.$message({
            message: '信息修改成功',
            type: 'success'
          });
          setTimeout(()=>{
            location.reload()
          },3000)
        }else{
          console.log(resp.data.message);
        }
      })
      .catch((error)=>{
        console.log(error)
      })
    },
  },
  filters:{
      myAddressCity:function(value){
          for(var y in that.CityInfo){
              if(that.CityInfo[y].value == value){
                  return value = that.CityInfo[y].label
              }
          }
      },
      myAddressErae:function(value){
          for(var y in that.CityInfo){
              for(var z in that.CityInfo[y].children){
                  if(that.CityInfo[y].children[z].value == value && value!=undefined){
                      return value = that.CityInfo[y].children[z].label;
                  }
              }
          }
      },
      myAddressMinerae:function(value){
          for(var y in that.CityInfo){
              for(var z in that.CityInfo[y].children){
                  for(var i in that.CityInfo[y].children[z].children){
                      if(that.CityInfo[y].children[z].children[i].value == value && value!=undefined){
                          return value = that.CityInfo[y].children[z].children[i].label
                      }
                  }
              }
          }
      },
  }
}
</script>

<style scoped>
.box-card{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.info{
  text-align: left;
  line-height: 40px;
  font-size: 16px;
}
</style>
